<template>
  <div>
    <div class="user-hander">
      <h4>订单管理</h4>
    </div>
    <el-table :data="tableData.filter(data => !search || data.customer.toLowerCase().includes(search.toLowerCase()))"
      border style="width: 100%">
      <el-table-column label="订单号" prop="code" width="200px">
        <template slot-scope="scope">
          <el-link type="primary" @click="selectOrderByCode(scope)">{{ scope.row.code }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="customer">
      </el-table-column>
      <el-table-column label="下单时间" prop="createTime">
      </el-table-column>
      <el-table-column label="总计" prop="total">
        <template slot-scope="scope">
          <p>￥{{ scope.row.total }}</p>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 ? 'primary' : 'danger'" disable-transitions>
            <p>{{ scope.row.status == 0 ? '正常' : '异常' }}</p>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="请输入用户名关键字">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="orderVisible" width="30%" :before-close="handleClose">
      <el-form ref="orderItemDate" :model="orderItemDate">
        <el-form-item label="订单号" label-width="80px">{{ orderItemDate.code }}</el-form-item>
        <el-form-item label="用户名" label-width="80px">{{ orderItemDate.customer }}</el-form-item>
        <el-form-item label="下单时间" label-width="80px">{{ orderItemDate.createTime }}</el-form-item>
        <el-form-item>
          <!-- 商品详情 -->
          <el-descriptions class="margin-top" :column="3" :size="size" border v-for="item in orderItemDate.items"
            style="margin-top:10px;" :key="item.itemsId">
            <el-descriptions-item>
              <template slot="label">
                商品ID
              </template>
              {{ item.itemsId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商品价格
              </template>
              {{ item.itemsPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                商品数量
              </template>
              {{ item.itemsQuantity }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                小计
              </template>
              ￥{{ item.itemsTotal }}
            </el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        <el-form-item label="总价" label-width="80px">￥{{ orderItemDate.total }}</el-form-item>
        <el-form-item label="订单状态" label-width="80px">{{ orderItemDate.status == 0 ? '正常' : '异常' }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  data() {
    return {
      //页码
      page: 1,
      //数据总数
      total: 20,
      //订单数据
      tableData: [],
      //订单号查询数据
      orderItemDate: [],
      orderVisible: false
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    //所有订单查询
    getOrderList() {
      Axios.get("http://localhost:8080/order/" + this.page + "/10")
        .then(res => {
          console.log(res.data)
          this.tableData = res.data.list
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    //订单查询
    selectOrderByCode(scope) {
      console.log("查询订单号", scope.row.code)
      Axios({
        url: "http://localhost:8080/order/",
        method: "PUT",
        data: {
          name: "",
          code: scope.row.code,
          createTime: "",
          customer: ""
        }
      })
        .then(res => {
          console.log(res.data.data)
          this.orderItemDate = res.data.data;
          this.orderVisible = true
        })
    },
    //删除行
    handleDelete(row) {
      console.log(row)
      Axios.delete("http://localhost:8080/order/" + row.code)
        .then(res => {
          console.log(res.data)
          this.getOrderList()
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>

</style>